import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import axios from 'axios'
import { Button } from 'react-vant'
import { ListItemState } from '../components/activeComp'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../store'
import { addAttentListAction } from '../../store/attention'
const Index = () => {
	const { id } = useParams()
	const [item, setItem] = useState<ListItemState>()
	const isLogin = useSelector((state: RootState) => state.user.isLogin)
	const navigate = useNavigate()
	const dispatch = useDispatch()
	useEffect(() => {
		(async () => {
			const resp = await axios.get('/api/detail', { params: { id } });
			setItem(resp.data.data)
		})()
	}, [])

	const handleAttent = () => {
		if(isLogin) {
			item && dispatch(addAttentListAction(item))
		} else {
			navigate('/login')
		}
	}

	if(!item) {
		return <div>数据加载中...</div>
	}

	return (
		<div>
			<img src={ item.url } alt="" width="100%"/>
			<h3>{ item.title }---<Button type="primary" onClick={ handleAttent }>关注</Button></h3>
			<p>{ item.desc }</p>
		
		</div>
	)
}

export default Index